<template>
  <view class="wrapper">
    <!-- 头部 -->
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <!-- table -->
    <view class="content">
      <u-cell-group>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex f-30">
            <view class="w-80 c-99"> 编号</view>
            <view class="flex-1">
              <u-input border="none" v-model="listData.spu.code" />
            </view>
          </view>
        </u-cell>
        <u-cell title="名称" arrow-direction="right">
          <view slot="title" class="flex f-30">
            <view class="w-80 c-99"> 名称</view>
            <view class="flex-1">
              <u-input v-model="listData.spu.name" border="none" />
            </view>
          </view>
        </u-cell>

        <u-cell>
          <view slot="title" class="flex f-30 justify-between">
            <view class="flex-sb">
              <view
                class="flex w-300 flex-aic"
                @click="
                  goRoute(
                    '/pages/application/pages/information/product-information/detail/components/category/category'
                  )
                "
              >
                <view class="w-80 c-99"> 类别 </view>
                <text class="">{{ listData.spu.spaceDiffValue }}</text>
              </view>

              <view
                class="w-300 flex p-l-20"
                @click="
                  goRoute(
                    '/pages/application/pages/information/product-information/detail/components/quarter/quarter'
                  )
                "
              >
                <view class="w-80 c-99"> 季度 </view>
                <text class="">{{ listData.spu.quarterName }}</text>
              </view>
            </view>
          </view>
        </u-cell>

        <u-cell>
          <view slot="title" class="flex f-30 justify-between">
            <view class="flex-sb">
              <view
                class="flex w-300 flex-aic"
                @click="
                  goRoute(
                    '/pages/application/pages/information/product-category/components/pricing-unit'
                  )
                "
              >
                <view class="w-80 c-99"> 单位 </view>
                <text class="">{{ listData.spu.unitName }}</text>
              </view>
              <view
                class="w-300 flex p-l-20 p-l-20"
                @click="
                  goRoute(
                    '/pages/application/pages/information/product-category/components/goods-supply-type'
                  )
                "
              >
                <view class="w-80 c-99"> 供货 </view>
                <text class="m-n-w-100">{{ listData.spu.supplyTypeName }}</text>
              </view>
            </view>
          </view>
        </u-cell>
        <u-cell rightIconStyle="color:#999;">
          <view
            slot="title"
            class="flex f-30"
            @click="
              goRoute(
                '/pages/application/pages/information/product-information/detail/components/technology/technology'
              )
            "
          >
            <view class="w-100 c-99"> 工艺 </view>
            <text class="m-n-w-100">{{ listData.spu.technologyName }}</text>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view slot="title" class="flex f-30">
            <view class="w-100 c-99"> 成分 </view>
            <view class="flex-1">
              <u-input border="none" v-model="listData.spu.components" />
            </view>
          </view>
        </u-cell>

        <u-cell
          :isLink="true"
          arrow-direction="right"
          rightIconStyle="color:#999;"
        >
          <view
            slot="title"
            class="flex f-30 justify-between"
            @click.self="
              goRoute(
                '/pages/application/pages/information/product-information/detail/components/width-weight/width-weight',
                listData.widthGramWeightList,
                1
              )
            "
          >
            <view class="flex-sb flex">
              <view class="w-80 c-99"> 幅宽 </view>
              <text class="w-180">
                <u--input
                  v-model="widWeg.widthValue"
                  placeholder=""
                  type="number"
                  border="surround"
                  class="inp-box"
                >
                  <view
                    class="text-gray-300 flex flex-aic"
                    slot="suffix"
                    @click.stop="
                      lengthIndex = 0;
                      lengthShow = true;
                    "
                    >| {{ widWeg.widthUnitName || "cm" }}
                  </view>
                </u--input>
              </text>
            </view>
            <view class="flex flex-aic">
              <view class="w-80 c-99"> 克重 </view>
              <text class="w-180">
                <u--input
                  v-model="widWeg.gramWeightValue"
                  placeholder=""
                  type="number"
                  border="surround"
                  class="inp-box"
                >
                  <view
                    class="text-gray-300 flex flex-aic"
                    slot="suffix"
                    @click.stop="
                      weightIndex = 0;
                      weightShow = true;
                    "
                    >| {{ widWeg.gramWeightUnitName || "g" }}
                  </view>
                </u--input>
              </text>
            </view>
          </view>
        </u-cell>
        <!-- <u-cell>
          <view slot="title" class="flex f-30 justify-between">
            <view class="flex-sb flex">
              <view class="w-140 c-99"> 坯布幅宽 </view>
              <text class="w-180">
                <u--input
                  v-model="listData.spu.widthSemiValue"
                  placeholder=""
                  type="number"
                  border="surround"
                  class="inp-box"
                >
                  <view
                    class="text-gray-300 flex flex-aic"
                    slot="suffix"
                    @click="
                      lengthIndex = 1;
                      lengthShow = true;
                    "
                    >| {{ listData.spu.widthSemiUnitName || "cm" }}
                  </view>
                </u--input>
              </text>
            </view>
            <view class="flex flex-aic">
              <view class="w-140 c-99"> 坯布克重 </view>
              <text class="w-180">
                <u--input
                  v-model="listData.spu.gramWeightSemiValue"
                  placeholder=""
                  type="number"
                  border="surround"
                  class="inp-box"
                >
                  <view
                    class="text-gray-300 flex flex-aic"
                    slot="suffix"
                    @click="
                      weightIndex = 1;
                      weightShow = true;
                    "
                    >| {{ listData.spu.gramWeightSemiUnitName || "g" }}
                  </view>
                </u--input>
              </text>
            </view>
          </view>
        </u-cell> -->
        <u-gap bgColor="#f6f6f6" height="10"></u-gap>
        <u-cell
          :isLink="true"
          arrow-direction="right"
          rightIconStyle="color:#999;"
        >
          <view
            slot="title"
            class="flex f-30 flex-jsb"
            @click="
              goRoute(
                '/pages/application/pages/information/product-information/detail/components/color-list/color-list',
                listData.colorVoList,
                1
              )
            "
          >
            <view class="w-80 c-99"> 颜色 </view>
            <view class="flex f-28 grey">
              {{ listData.colorVoList.length }} 个</view
            >
          </view>
        </u-cell>

        <u-gap bgColor="#f6f6f6" height="10"></u-gap>
        <u-cell
          :isLink="true"
          arrow-direction="right"
          rightIconStyle="color:#999;"
        >
          <view
            slot="title"
            class="flex f-30 flex-jsb"
            @click="
              goRoute(
                '/pages/application/pages/information/product-information/detail/components/cutting-sample-price/cutting-sample-price',
                cuttingSamplesList,
                1
              )
            "
          >
            <view class="w-150 c-99"> 剪样价格 </view>
            <view class="flex f-28 grey">
              {{ cuttingSamplesPrice }} 元/{{
                listData.spu.unitName || "米"
              }}</view
            >
          </view>
        </u-cell>

        <u-gap bgColor="#f6f6f6" height="10"></u-gap>
        <u-cell
          :isLink="true"
          arrow-direction="right"
          rightIconStyle="color:#999;"
        >
          <view
            slot="title"
            class="flex f-30 flex-jsb"
            @click="
              goRoute(
                '/pages/application/pages/information/product-information/detail/components/bulk-price/bulk-price',
                bulkCargoList,
                1
              )
            "
          >
            <view class="w-150 c-99"> 大货价格 </view>
            <view class="flex f-28 grey">
              {{ bulkCargoPrice }} 元/{{ listData.spu.unitName || "米" }}</view
            >
          </view>
        </u-cell>
        <u-gap bgColor="#f6f6f6" height="10"></u-gap>

        <u-cell
          :isLink="true"
          arrow-direction="right"
          rightIconStyle="color:#999;"
        >
          <view
            slot="title"
            class="flex f-30 flex-jsb"
            @click="
              goRoute(
                '/pages/application/pages/information/product-information/detail/components/low-calorie/low-calorie-list',
                bulkCargoList,
                2
              )
            "
          >
            <view class="w-80 c-99"> 底卡 </view>
            <view class="flex f-28 grey">
              {{ listData.bottomCardVoList.length }} 个</view
            >
          </view>
        </u-cell>
        <u-gap bgColor="#f6f6f6" height="10"></u-gap>
        <u-cell arrow-direction="right">
          <template slot="title">
            <u--text
              class="m-b-20"
              type="info"
              size="15"
              :text="`产品主图   ${productImgList.length}/9`"
            ></u--text>
            <u-upload
              name="ProductList"
              :multiple="false"
              deletabl="false"
              :maxCount="9"
              :previewFullImage="true"
              :fileList="productImgList"
              @afterRead="afterRead"
              @delete="deletePic"
            ></u-upload>
          </template>
        </u-cell>
        <u-cell arrow-direction="right">
          <template slot="title">
            <u--text
              class="m-b-20"
              type="info"
              size="15"
              :text="`色卡图片   ${colorCardImgList.length}/9`"
            ></u--text>
            <u-upload
              name="ColorCard"
              :multiple="false"
              deletabl="false"
              :maxCount="9"
              :previewFullImage="true"
              :fileList="colorCardImgList"
              @afterRead="afterRead"
              @delete="deletePic"
            ></u-upload>
          </template>
        </u-cell>
      </u-cell-group>
      <u-gap bgColor="#f6f6f6" height="10"></u-gap>
      <u-cell arrow-direction="right">
        <view slot="title" class="flex f-30">
          <view class="w-80 c-99"> 标签 </view>
          <view class="flex-1">
            <u-input border="none" />
          </view>
        </view>
      </u-cell>
      <template v-if="isMore">
        <u-gap bgColor="#f6f6f6" height="10"></u-gap>
        <u-cell>
          <view slot="title" class="flex f-30 justify-between">
            <view class="flex-sb">
              <view class="flex w-300 flex-aic">
                <view class="w-80 c-99"> 纱支 </view>
                <text class="w-180"><u-input border="none" /></text>
              </view>

              <view class="flex-1 flex-sb p-l-20">
                <view class="w-80 c-99"> 密度 </view>
                <text class="w-180"><u-input border="none" /></text>
              </view>
            </view>
          </view>
        </u-cell>
        <u-cell
          :isLink="true"
          arrow-direction="right"
          rightIconStyle="color:#999;"
        >
          <view
            slot="title"
            class="flex f-30 flex-jsb"
            @click="
              goRoute(
                '/pages/application/pages/information/product-information/detail/components/specifications/specifications',
                listData.specList,
                3
              )
            "
          >
            <view class="w-80 c-99"> 规格 </view>
            <view class="flex f-28 grey">
              {{ listData.specList.length }} 个</view
            >
          </view>
        </u-cell>
        <u-cell
          title="类型"
          arrow-direction="right"
          @click="
            () => {
              isLikeShow = true;
            }
          "
        >
          <view slot="title" class="flex f-30" @click="clothTypeShow = true">
            <view class="w-80 c-99"> 类型 </view>
            <view class="flex-1"> {{ listData.spu.typeName }} </view>
          </view>
        </u-cell>
        <!-- <u-cell title="其他要求" arrow-direction="right">
          <view slot="title" class="flex f-30">
            <view class="w-140 c-99"> 其他要求 </view>
            <view class="flex-1"> </view>
          </view>
        </u-cell> -->
        <!-- <u-cell title="其他参数" arrow-direction="right">
          <view slot="title" class="flex f-30">
            <view class="w-140 c-99"> 其他参数 </view>
            <view class="flex-1"> </view>
          </view>
        </u-cell> -->
        <u-cell title="时间" arrow-direction="right">
          <view slot="title" class="flex f-30">
            <view class="w-80 c-99"> 时间 </view>
            <view class="flex-1"> 2023-08-12 12:00 </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex f-30">
            <view class="w-80 c-99"> 备注 </view>
            <view class="flex-1">
              <!-- <u-input border="none"  /> -->
              <u-input border="none" v-model="listData.spu.remarks" />
            </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex f-30">
            <view class="w-170 c-99"> 自定义排序 </view>
            <view class="flex-1">
              <u-input border="none" />
            </view>
            <view class="max grey"> Max </view>
          </view>
        </u-cell>
        <!-- <u-cell arrow-direction="right">
          <view slot="title" class="flex f-30">
            <view class="w-180 c-99"> 虚拟-销售额 </view>
            <view class="flex-1">
              <u-input border="none" />
            </view>
            <u-icon name="plus" color="#999"></u-icon>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex f-30">
            <view class="w-180 c-99"> 虚拟-浏览数 </view>
            <view class="flex-1">
              <u-input border="none" />
            </view>
            <u-icon name="plus" color="#999"></u-icon>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex f-30">
            <view class="w-180 c-99"> 虚拟-收藏数 </view>
            <view class="flex-1">
              <u-input border="none" />
            </view>
            <u-icon name="plus" color="#999"></u-icon>
          </view>
        </u-cell> -->
      </template>
      <view class="flex more-view" @click="onMoreShow">
        <template v-if="isMore">
          <u-icon name="arrow-up" color="#ccc"></u-icon>
          <text class="m-l-16">隐藏属性</text>
        </template>
        <template v-else>
          <u-icon name="arrow-down" color="#ccc"></u-icon>
          <text class="m-l-16">更多属性</text>
        </template>
      </view>
    </view>
    <u-gap bgColor="#fff" height="60"></u-gap>
    <!-- 保存 -->
    <view class="fixed-btn">
      <u-button
        text="保存"
        @click="clickBtn({ key: 'btn1' })"
        type="primary"
        shape="circle"
        color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
      ></u-button>
    </view>
    <!-- 选择器 成品胚布 -->
    <u-popup
      :show="isLikeShow"
      mode="center"
      :round="5"
      @close="onLikeClose"
      :closeOnClickOverlay="true"
    >
      <view class="pop-ul">
        <view
          class="pop-li"
          :class="{ active: listData.spu.type == item.value }"
          v-for="(item, index) in clothTypeShowColumns"
          :key="index"
          @click="onCheck(item)"
        >
          <u-icon
            name="checkbox-mark"
            color="#fff"
            class="m-r-20"
            size="24"
            v-if="listData.spu.type == item.value"
          ></u-icon>
          {{ item.label }}
        </view>
      </view>
    </u-popup>
    <u-picker
      @cancel="lengthShow = false"
      keyName="label"
      :show="lengthShow"
      :columns="lengthColumns"
      @confirm="lengthChange"
    ></u-picker>

    <u-picker
      @cancel="weightShow = false"
      keyName="label"
      :show="weightShow"
      :columns="weightColumns"
      @confirm="weightConfirm"
    ></u-picker>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import { getToken } from "@/common/auth.js";
import {
  addData,
  getListClothTypeOptionsData,
  getGoodsWidthUnitListOptionsData,
  getGoodsGramWeightUnitOptionsData,
  getInfoForBillDetailById,
  initAddData,
} from "@/apis/bill/information/product";
import { addImg } from "@/apis/bill/upload-img";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      isLikeShow: false,
      isMore: false,
      lengthShow: false,
      lengthIndex: 0,
      lengthColumns: [],

      weightShow: false,
      weightColumns: [],
      weightIndex: 0,

      clothTypeShow: false,
      clothTypeShowColumns: [],
      unitShow: false,
      unitListColumns: [],

      config: {
        title: "产品",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
      },
      productImgList: [],
      colorCardImgList: [],
      listData: {
        labelList: [], //标签传数组
        spu: {
          code: null, //编号
          components: null, // 成分
          name: null, //名称
          type: 1, //商品类型(成品,胚布)
          typeName: "",
          unitId: "", //单位id
          unitName: "", // 单位name 瓶
          widthValue: "", // 成品幅宽
          widthUnitName: "", // 成品幅宽单位

          gramWeightValue: "", // 成品克重
          ghtUnitName: "", // 成品克重单位

          gramWeightSemiValue: "", //坯布克重
          gramWeightSemiUnitName: "", //坯布克重单位

          widthSemiValue: "", //坯布幅宽
          widthSemiUnitName: "cm", //坯布幅宽单位
          catId: "", // 类别id
          catName: "", // 类别name
          quarterName: "", // 季度传name
          spaceDiffTypeName: "", // 空差 传+ - =
          spaceDiffValue: "", // 类别name
          supplyTypeId: "", // 供货类型ID
          supplyTypeName: "", // 供货类型name
          technologyName: "", // 工艺 数码印花
          remarks: "", // 备注
        },
        spuImageList: [], // 产品主图片
        colorVoList: [], //商品颜色
        bottomCardVoList: [], // 低卡信息
        specList: [], // 规格信息
        widthGramWeightList: [],
      },
      fileListProductList: [],
      fileListColorCard: [],
      cuttingSamplesList: [],
      bulkCargoList: [],
      widWeg: {},
    };
  },
  computed: {
    cuttingSamplesPrice() {
      const minValue = Math.min(
        ...this.cuttingSamplesList.map((object) => object.price || 0)
      );
      const maxValue = Math.max(
        ...this.cuttingSamplesList.map((object) => object.price || 0)
      );
      if (minValue === Infinity && maxValue === -Infinity) {
        return 0;
      }
      if (minValue === maxValue) {
        return minValue;
      }
      if (minValue != maxValue) {
        return minValue + "-" + maxValue;
      }
      return 0;
    },
    bulkCargoPrice() {
      const minValue = Math.min(
        ...this.bulkCargoList.map((object) => object.price || 0)
      );
      const maxValue = Math.max(
        ...this.bulkCargoList.map((object) => object.price || 0)
      );
      if (minValue === Infinity && maxValue === -Infinity) {
        return 0;
      }
      if (minValue === maxValue) {
        return minValue;
      }
      if (minValue != maxValue) {
        return minValue + "-" + maxValue;
      }
      return 0;
    },
  },
  watch: {},
  onLoad() {
    if (this.$Route.query.id) {
      this.getInfoForBillDetailByIds();
    } else this.getInitAddData();

    this.getListClothTypeOptionsDatas();
    this.getGoodsWidthUnitListOptionsDatas();
    this.getGoodsGramWeightUnitOptionsDatas();
    uni.$on("on-p-category", (data) => {
      this.listData.spu.spaceDiffValue = data.name;
    });
    uni.$on("on-p-product-information-category", (data) => {
      this.listData.spu.quarterName = data.label;
    });
    uni.$on("on-p-product-information-technology", (data) => {
      this.listData.spu.technologyName = data.label;
    });
    uni.$on("on-pdcl-arr", (data) => {
      switch (data.type) {
        case 1:
          this.listData.bottomCardVoList = data.data;
          break;
        case 2:
          this.listData.colorVoList = data.data;
          this.getListBySpuAndUnit();
          break;
        case 3:
          this.listData.specList = data.data;
          break;
        case 4:
          this.cuttingSamplesList = data.data;
          break;
        case 4:
          this.bulkCargoList = data.data;
          break;
        case 5:
          this.listData.widthGramWeightList = data.data;
          for (let i = 0; i < this.listData.widthGramWeightList.length; i++) {
            const element = this.listData.widthGramWeightList[i];
            if (element.isDefault) {
              this.widWeg = element;
            }
          }
          break;
        default:
          break;
      }
    });
    // 获取单位
    uni.$on("on-pricing-unit", (data) => {
      this.listData.spu.unitId = data.value;
      this.listData.spu.unitName = data.label;
    });
    // 获取供货类型
    uni.$on("on-goods-supply-type", (data) => {
      this.listData.spu.supplyTypeId = data.id;
      this.listData.spu.supplyTypeName = data.label;
    });
  },
  onReady() {},
  methods: {
    // 删除图片
    deletePic(event) {
      this.listData.productList.splice(event.index, 1);
    },
    // 设置价格
    getListBySpuAndUnit() {
      // console.log('[ this.listData.spu.unitId ] >', this.listData.spu.unitId)
      if (this.bulkCargoList.length <= 0) {
        for (let index = 0; index < this.listData.colorVoList.length; index++) {
          const item = this.listData.colorVoList[index];
          item.price = 0;
          item.priceType = "normal";
          item.colorId = null;
          item.unitId = this.listData.spu.unitId;
          this.bulkCargoList.push(JSON.parse(JSON.stringify(item)));
        }
      } else {
        this.listData.colorVoList.forEach((colorVo) => {
          // 检查colorVo在cuttingSamplesList中的存在
          const exists = this.bulkCargoList.some(
            (cuttingSample) => cuttingSample.colorNumber === colorVo.colorNumber
          );

          if (!exists) {
            this.bulkCargoList.push(JSON.parse(JSON.stringify(colorVo)));
          }
        });

        // 删除cuttingSamplesList中colorNumber在colorVoList中不存在的数据
        this.bulkCargoList = this.bulkCargoList.filter((cuttingSample) =>
          this.listData.colorVoList.some(
            (colorVo) => colorVo.colorNumber === cuttingSample.colorNumber
          )
        );

        this.bulkCargoList.forEach((item) => {
          if (!item.price) {
            item.price = 0;
          }
          if (!item.unitId) {
            item.unitId = this.listData.spu.unitId;
          }
          item.priceType = "normal";
          item.colorId = null;
        });
      }
      // console.log('[ this.bulkCargoList ] >', this.bulkCargoList)
      if (this.cuttingSamplesList.length <= 0) {
        for (let index = 0; index < this.listData.colorVoList.length; index++) {
          const item = this.listData.colorVoList[index];
          item.price = 0;
          item.priceType = "cutSample";
          item.colorId = null;
          item.unitId = this.listData.spu.unitId;
          this.cuttingSamplesList.push(JSON.parse(JSON.stringify(item)));
        }
      } else {
        this.listData.colorVoList.forEach((colorVo) => {
          // 检查colorVo在cuttingSamplesList中的存在
          const exists = this.cuttingSamplesList.some(
            (cuttingSample) => cuttingSample.colorNumber === colorVo.colorNumber
          );

          if (!exists) {
            this.cuttingSamplesList.push(JSON.parse(JSON.stringify(colorVo)));
          }
        });

        // 删除cuttingSamplesList中colorNumber在colorVoList中不存在的数据
        this.cuttingSamplesList = this.cuttingSamplesList.filter(
          (cuttingSample) =>
            this.listData.colorVoList.some(
              (colorVo) => colorVo.colorNumber === cuttingSample.colorNumber
            )
        );

        this.cuttingSamplesList.forEach((item) => {
          if (!item.price) {
            item.price = 0;
          }
          if (!item.unitId) {
            item.unitId = this.listData.spu.unitId;
          }
          item.priceType = "cutSample";
          item.colorId = null;
        });
      }
    },
    // 设置成品设置
    onCheck(val) {
      this.listData.spu.type = val.value;
      this.listData.spu.typeName = val.label;
      this.onLikeClose();
    },
    onLikeClose() {
      this.isLikeShow = false;
    },
    // 获取初始数据
    getInitAddData() {
      initAddData().then((res) => {
        if (!res.flag) return;
        this.listData = res.data || {};
        this.listData.spuImageList = [];
        this.getListBySpuAndUnit();
      });
    },
    // 显示更多属性
    onMoreShow() {
      this.isMore = !this.isMore;
    },
    // 获取类型
    getInfoForBillDetailByIds() {
      getInfoForBillDetailById(this.$Route.query.id).then((res) => {
        if (!res.data.flag) return;
        const data = res.data.data || {};
        this.listData = data;
        this.bulkCargoList = [];
        this.cuttingSamplesList = [];
        for (
          let index = 0;
          index < this.listData.goodsPriceList.length;
          index++
        ) {
          const item = this.listData.goodsPriceList[index];
          if (item.priceType === "normal") {
            this.bulkCargoList.push(JSON.parse(JSON.stringify(item)));
          } else if (item.priceType === "cutSample") {
            this.cuttingSamplesList.push(JSON.parse(JSON.stringify(item)));
          }
        }

        for (let i = 0; i < this.listData.spuImageList.length; i++) {
          const element = this.listData.spuImageList[i];
          if (element.typeId == 1) {
            this.productImgList.push(element);
          } else {
            this.colorCardImgList.push(element);
          }
        }
        for (let i = 0; i < this.listData.widthGramWeightList.length; i++) {
          const element = this.listData.widthGramWeightList[i];
          if (element.isDefault) {
            this.widWeg = element;
          }
        }
        // this.getListBySpuAndUnit();
      });
    },
    clickBtn(item) {
      let _this = this;
      if (item.key === "btn1") {
        this.listData.goodsPriceList = [
          ...this.cuttingSamplesList,
          ...this.bulkCargoList,
        ];
        this.listData.spuImageList = [
          ...this.colorCardImgList,
          ...this.productImgList,
        ];
        for (let i = 0; i < this.listData.widthGramWeightList.length; i++) {
          let element = this.listData.widthGramWeightList[i];
          if (element.isDefault) {
            element = this.widWeg;
          }
          if(element.spuId){
            element.spuId = this.listData.spu.id
          }
        }
        addData(this.listData).then((res) => {
          if (!res.data.flag) return;
          const data = res.data || {};
          _this.$refs.uToast.show({
            type: "success",
            title: "默认主题",
            message: "保存成功",
            complete() {
              uni.navigateBack();
            },
          });
        });
      } else if (item.key === "btn2") {
        // this.productPopShow = !this.productPopShow;
      }
    },
    lengthChange(e) {
      if (this.lengthIndex == 0) {
        this.widWeg.widthUnitName = e.value[0].label;
        this.widWeg.widthUnitId = e.value[0].value;
      } else {
        this.listData.spu.widthSemiUnitName = e.value[0].label;
      }

      this.lengthShow = !this.lengthShow;
    },
    // cm  mm  单位
    getGoodsWidthUnitListOptionsDatas() {
      getGoodsWidthUnitListOptionsData().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.lengthColumns.push(data);
      });
    },
    // g  gg  单位
    getGoodsGramWeightUnitOptionsDatas() {
      getGoodsGramWeightUnitOptionsData().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.weightColumns.push(data);
      });
    },
    // 选择器
    switchChange(e, item, type, type1) {
      this.listData[type][type1] = e.value[0].value;
      this[item] = false;
    },
    // 成品胚布
    getListClothTypeOptionsDatas() {
      getListClothTypeOptionsData().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.clothTypeShowColumns = data;
      });
    },
    // 页面跳转
    goRoute(url, item = null, type = null) {
      this.$setPageParams("product-information-detail", {
        item: item,
      });
      if (type == 2 && this.listData.bottomCardVoList.length == 0) {
        this.$Router.push({
          path: "/pages/application/pages/information/product-information/detail/components/low-calorie/add-low-calorie",
        });
        return;
      }

      this.$Router.push({
        path: url,
        query: {
          data: this.$Route.query.id || "",
          spuId: this.listData.spu.id || "",
          item: encodeURIComponent(JSON.stringify(item)),
          unitId: this.listData.spu.unitId || "",
          unitName: this.listData.spu.unitName || "",
        },
      });
    },
    // 删除图片
    deletePic(event) {
      // this[`fileList${event.name}`].splice(event.index, 1);
      if (event.name == "ProductList") {
        this.productImgList.splice(event.index, 1);
      } else {
        this.colorCardImgList.splice(event.index, 1);
      }
    },
    // 新增图片
    async afterRead(event) {
      console.log("[ event ] >", event);
      const result = await this.uploadFilePromise(event.file.url);
      if (event.name == "ProductList") {
        this.productImgList.push({
          url: result.data.url,
          name: result.data.name,
          typeId: 1,
        });
      } else {
        this.colorCardImgList.push({
          url: result.data.url,
          name: result.data.name,
          typeId: 2,
        });
      }
      this.$forceUpdate();
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: addImg(), // 仅为示例，非真实的接口地址
          // url: "http://localhost:8080/api/erp/oss/uploadImg",
          filePath: url,
          name: "file",
          header: {
            Authorization: `${getToken()}`,
          },
          success: (res) => {
            resolve(JSON.parse(res.data));
          },
        });
      });
    },
    btnSelectGoods(url) {
      if (!url) return;
      this.$Router.push({
        name: url,
      });
    },
    weightConfirm(e) {
      if (this.weightIndex == 0) {
        this.widWeg.gramWeightUnitName = e.value[0].label;
        this.widWeg.gramWeightUnitId = e.value[0].value;
      } else {
        this.listData.spu.gramWeightSemiUnitName = e.value[0].label;
      }
      this.weightShow = !this.weightShow;
    },
  },
  beforeDestroy() {
    uni.$off("on-pdcl-arr");
    uni.$off("on-p-category");
    uni.$off("on-p-product-information-category");
    // 清除上个页面的
    uni.$off("on-add-low-calorie");
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  // height: 100%;
  background-color: #fff;

  .content {
    flex: 1;
    overflow-y: scroll;
  }

  .inp-box {
    background: #f6f6f6;
    height: 60rpx;
  }

  .more-view {
    height: 80rpx;
    background: #f1f1f1;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 28rpx;
  }
}
</style>